<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  // 更换主题色, 解决 scss 方法偶尔生效
  document.body.style.setProperty("--el-color-primary", "#07b194");
  document.body.style.setProperty("--el-color-primary-light-5", "#4ed4be");
  document.body.style.setProperty("--el-color-primary-light-3", "#4ed4be");
  document.body.style.setProperty("--el-color-primary-dark-2", "#118471");
  document.body.style.setProperty("--el-menu-active-color", "#07b194");
  console.log("App Mounted");
});
</script>

<template>
  <RouterView />
</template>

<style lang="scss">
@import "@/assets/scss/global.scss";

.page-header {
  .page-title {
    display: flex;

    p {
      height: 28px;
      line-height: 28px;
      border-radius: 28px;
      padding: 0 10px;
      color: #fff;
      background-color: $color-theme;
      cursor: default;
    }
  }
}

.page-body {
  margin-top: 20px;
  padding: 20px 30px;
  background-color: #fff;
  box-shadow: 0 0 2px #ccc;
  min-width: 820px;
}

// 统一按钮样式
// .el-button--small.gxan-btn {
//   // border-radius: 24px;
// }

// .el-button--small.gxan-btn-on {
//   background-color: $color-theme;
//   color: #fff;
//   border: none;
// }
</style>
